<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	
	<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
	<link rel="stylesheet" href="css/jquery.ui.all.css" type="text/css">
	<link rel="stylesheet" href="css/demos.css" type="text/css">
	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="js/jquery.ui.accordion.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" >
		$(function() {
			$( "#accordion" ).accordion({
				event: "mouseover"
			});
		});
	</script>
	<style type="text/css">
		.picture{
			float:left;
			width:60px;
			height:60px;
		}
		.clear{
			clear:both;
		}
		.detail{
			float:right;
			width:550px;
			height:70px;
		}
		
	</style>
	<title>CRM-公司信息</title>
</head>
<body>
		<%@ include file="include/base.jsp" %>
		<%@ include file="include/base-top.jsp" %>
		
		<div class="container">
			<hr/>
			<div class="span8" style="height:800px;">
				<div class="page-header header">
					<div class="picture">
						<img src="image/company.png"></img>	
					</div>
					<div class="detail">
						<h3>${company.companyname }</h3>
						<a href="#">编辑链接</a>
					</div>
					<div class="clear"></div>

				</div>
				<div style="margin-bottom: 18px;" class="tabbable">
			        <ul class="nav nav-tabs">
			          <li class="active"><a data-toggle="tab" href="#tab1">事件&邮件</a></li>
			          <li class=""><a id="contact" data-toggle="tab" href="#tab2">联系人</a></li>
			          <li class=""><a data-toggle="tab" href="#tab3">业务机会</a></li>
			          <li class=""><a data-toggle="tab" href="#tab4">重要日期</a></li>
			        </ul>
			        <div style="padding-bottom: 9px; border-bottom: 1px solid #ddd;" class="tab-content">
			          <div id="tab1" class="tab-pane active">
			            <div>
							<form action="#" method="post">
								<div class="control-group">
									<br/>
									<div class="controls">
									  <textarea style="width:400px;height:80px" rows="3" id="textarea" class="input-xlarge"></textarea>
									</div>
									<button class="btn btn-success" style="float:right">添加事件</button>
									<div class="clear"></div>
								</div>
							</form>
						</div>
			          </div>
			          <div id="tab2" class="tab-pane">
						<div class="picture">	
						</div>
						<div class="">
							<h3>Name</h3>
							<span>Job</span>-<span>公司</span><br/>
							<a href="#">编辑链接</a>
						</div>
						<div class="clear"></div>
							
						<form action="addContact.jspx" method="get">
							<div class="control-group">		
								
								<button class="btn btn-success">添加联系人</button>
								<div class="clear"></div>
							</div>
						</form>
			          </div>
			          <div id="tab3" class="tab-pane ">
			            <div>
							<br/><br/>
							<form action="addchance.jspx" method="get">
							<button class="btn btn-success">添加机会</button>
							</form>
						</div>
			          </div>
			          <div id="tab4" class="tab-pane ">
			            <div>
							<br/><br/>
							<form action="#" method="post">
							<a class="btn btn-success" href="#myModal" data-toggle="modal">选择日期</a>
							</form>
							<div class="modal hide fade" id="myModal" style="display: none;">
								<div class="modal-header">
									<a data-dismiss="modal" class="close">×</a>
									<h3>添加一个日期</h3>
								</div>
					            <div class="modal-body">
									<div class="control-group string optional">
										<div class="controls">
											<select onchange="$(this).val() ? $(this).next().hide() : $(this).next().show()" name="contact_date[occasion]" id="contact_date_occasion"><option value="生日">生日</option>
												<option value="周年纪念">周年纪念</option>
												<option value="第一次见面">第一次见面</option>
												<option value="雇用">雇用</option>
												<option value="解雇">解雇</option>
												<option value="">其它...</option>
											</select>
											<input type="text" style="display:none" size="30" name="contact_date[description]" id="contact_date_description">
										</div>
									</div>			
									<div class="control-group integer optional">
										<div class="controls">
											<select name="contact_date[month]" id="contact_date_month"><option value="1">一月</option>
												<option value="2">二月</option>
												<option value="3">三月</option>
												<option value="4">四月</option>
												<option value="5">五月</option>
												<option value="6">六月</option>
												<option value="7">七月</option>
												<option value="8">八月</option>
												<option value="9">九月</option>
												<option value="10">十月</option>
												<option value="11">十一月</option>
												<option value="12">十二月</option>
											</select>
											<select name="contact_date[day]" id="contact_date_day"><option value="1">1</option>
												<option value="2">2</option>
												<option value="3">3</option>
												<option value="4">4</option>
												<option value="5">5</option>
												<option value="6">6</option>
												<option value="7">7</option>
												<option value="8">8</option>
												<option value="9">9</option>
												<option value="10">10</option>
												<option value="11">11</option>
												<option value="12">12</option>
												<option value="13">13</option>
												<option value="14">14</option>
												<option value="15">15</option>
												<option value="16">16</option>
												<option value="17">17</option>
												<option value="18">18</option>
												<option value="19">19</option>
												<option value="20">20</option>
												<option value="21">21</option>
												<option value="22">22</option>
												<option value="23">23</option>
												<option value="24">24</option>
												<option value="25">25</option>
												<option value="26">26</option>
												<option value="27">27</option>
												<option value="28">28</option>
												<option value="29">29</option>
												<option value="30">30</option>
												<option value="31">31</option>
											</select>
											<select name="contact_date[year]" id="contact_date_year"><option value="1950">1950</option>
												<option value="2000">2000</option>
												<option value="2001">2001</option>
												<option value="2002">2002</option>
												<option value="2003">2003</option>
												<option value="2004">2004</option>
												<option value="2005">2005</option>
												<option value="2006">2006</option>
												<option value="2007">2007</option>
												<option value="2008">2008</option>
												<option value="2009">2009</option>
												<option value="2010">2010</option>
												<option value="2011">2011</option>
												<option value="2012">2012</option>
												<option selected="selected" value="">( 每年 )</option>
												<option value="2013">2013</option>
												<option value="2014">2014</option>
												<option value="2015">2015</option>
											</select>
										</div>
									</div>			
									<div class="control-group boolean optional checkbox">
										<div class="controls">
											<input type="hidden" value="0" name="contact_date[assign_task]"><input type="checkbox" value="1" onclick="if('true'=='true') $(this).attr('checked') ? $('#task-owner-field').show() : $('#task-owner-field').hide()" name="contact_date[assign_task]" id="contact_date_assign_task">
											在每年这个日期的前一周创建一个提醒任务
										</div>
									</div>			
									<div id="task-owner-field" style="display:none">
										给
										<select name="contact_date[task_owner_id]" id="contact_date_task_owner_id"><option value="5855">我</option></select>
									</div>
								</div>
					            <div class="modal-footer">
					              <a data-dismiss="modal" class="btn" href="#">关闭</a>
					              <a class="btn btn-primary" href="#">保存日期</a>
					            </div>
					        </div>
						</div>
			          </div>
			        </div>
			    </div>
			
				<div class="well">
					添加的时间,机会,日期记录.
				</div>
				
			</div>
			<div class="span3 well">
			
				<h4 style="display:inline">未办任务</h4 >
				<span style="float:right"><a data-toggle="modal" href="#myModal" style="font-size:12px;" >添加任务</a></span>
				<div class="modal fade" id="myModal">
				  <div class="modal-header">
				    <a class="close" data-dismiss="modal">×</a>
				    <h3>添加一个任务</h3>
				  </div>
				  <div class="modal-body">
				    <form action="addtask2.jspx" method="post">
						<input type="text" class="span6" name="task.taskname"/>
						<label for="">到期时间？
							<select id="" name="task.endtime">
								<option value="今天">今天</option>
								<option value="明天">明天</option>
								<option value="本周">本周</option>
								<option value="4">下周</option>
								<option value="5">以后</option>
								<option value="6">具体时间</option>
							</select>
						</label>
						<label for=""  >选择一个分类
							<select name="" id=""  name="task.itemname">
								<option value="">无</option>
							<c:forEach items="${taskItemList}" var="tList">
								<option value="${tList.id}">${tList.itemname}</option>
							</c:forEach>
								<option value="">添加分类</option>
							</select>
							<a href="">编辑分类</a>
						</label>
						<label for="" >谁负责
							<select name="" id="" name="taskitem.id">
								<option value="">无</option>
							<c:forEach items="${emList}" var="em">
								<option value="">${em.name}</option>
							</c:forEach>
								<option value="" id="add">添加分类</option>
							</select>
						</label>
						<input type="radio"> 同事可以看见这个任务
						<div class="modal-footer">
				   			 <input type="submit" class="btn btn-primary" value="添加任务">
				   			 <a href="createtask.jspx" class="btn" data-dismiss="modal">取消</a>
				 		 </div>
					</form>
					<script type="text/javascript">
						$("#add").click(function(){
							alert("请");
						});
					</script>
				  </div>
				  
				</div>
				<hr/>
				<c:forEach items="${taskList }" var="tl">
					<span class="label label-important">${tl.taskname }</span>(${tl.employee.name })<br/>
				</c:forEach>
				
			
			</div>
			<div class="span3 well">
			<span style="float:right"><a href="#">编辑</a></span>	
			<h4 style="display:inline">联系信息</h4>
				<hr/>
				<ul class="nav nav-list contacts">
				
					<li class="nav-header">电话</li>
					<li>${company.tel }<span></span></li>
					
					<li class="nav-header">地址</li>
					<li>${company.address }<span></span></li>
					
					<li class="nav-header">IM</li>
					<li>${company.im }<span></span></li>
					
				</ul>
			</div>
			<!-- <div class="span3 well">
				<span style="float:right"><a href="#">编辑</a></span>
				<h4>联系信息</h4>
				<hr/>
				
			</div> -->
			<div class="span3 well">
			 	<div id="background_container" style="display: block;">
					<span style="float:right"><a id="editMsg" href="javascript:;">编辑</a></span>	
					<h4 style="display:inline">背景信息</h4>
					<hr/>
			  		<div ><p id="background_info">${company.message }</p></div>
				</div>
			
				<div style="display:none" id="edit_background_container">
					<form method="post" id="background_form" data-remote="true" accept-charset="UTF-8">
						<div style="margin:0;padding:0;display:inline">
							<input type="hidden" value="✓" name="utf8">
							<input type="hidden" value="9E13xqlzO/iYpN5ek5mCylarrET8j6HLsfiXaJf9g6c=" name="authenticity_token">
						</div>
						<input type="hidden" value="Company" name="target_type" id="target_type">
						<input type="hidden" value="522911" name="target_id" id="target_id">
						<div class="control-group text optional">
							<label class="text optional control-label" for="contact_others"> 修改背景信息</label>
							<div class="controls">
								<textarea name="company.message" id="description" class="content">${company.message }</textarea>
								<input type="hidden" id="companyId" value="${company.id }"/>
							</div>
						</div>
						<div class="submit">
							<a id="saveMsg" href="javascript:;" class="btn btn-success">保存</a>
							<a id="quxiao" href="#" class="btn">取消</a>
				 		</div>
					</form>  
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			$(document).ready(function(){
				
				$('#editMsg').click(function(){
					$('#background_container').hide();
					$('#edit_background_container').show();
				});
				
				$('#quxiao').click(function(){
					$('#background_container').show();
					$('#edit_background_container').hide();
				});
				
				$('#saveMsg').click(function(){
					var companyMsg = $('#description').val();
					var companyId = $('#companyId').val();
					
					if(companyMsg != null){
						$.get("saveCompanyMsg.jspx",{"companyMsg":companyMsg,"id":companyId},function(xml){
							if(xml == false){
								$('#background_info').replaceWith(companyMsg);
								$('#edit_background_container').hide();
								$('#background_container').show();
							}
						});
					}
				});
				
			});
		</script>
		

	
</body>
</html>
